<template>
  <div class="myDisplayWrap">
    <top></top>
    <div class=" w1200 myDisplayContent">
      <div class="breadcrumbs">意见反馈/{{ breadcrumbs }}</div>
      <a-row class="myDisplayContent" style="display: flex;">
        <a-col class="myDisplayLeft">
          <a-menu style="width: 256px" :default-selected-keys="['1']" :selected-keys="[current]"
            :open-keys.sync="openKeys" mode="inline">
            <a-sub-menu v-for="(item, index) in permTree" :key="item.id">
              <span slot="title"><a-icon :type="item.iconUrl" /><span>{{ item.permName }}</span></span>
              <template v-if="item.children">
                <a-menu-item @click="menuClick(child)" v-for="(child, childIndex) in item.children" :key="child.id">
                  <span>{{ child.permName }}</span>
                </a-menu-item>
              </template>
            </a-sub-menu>
          </a-menu>
        </a-col>
        <!-- 右侧内容 -->
        <a-col :span="20" :offset="0" class="InvoiceRightContent">
          <slot />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import Top from '@/components/base/Top.vue'
import { qryModulePermByRoleId } from '@/api/sso'
import { list2MenuTree } from "@/utils/func";
import storage from '@/utils/storage'


export default {
  props: {
    breadcrumbs: '',
  },
  components: {
    Top
  },
  data() {
    return {
      openKeys: [],
      permTree: [],
      topPermTree: storage.session.get('topPermTree') || [],
      current: ''
    }
  },
  mounted() {
    this.current = this.$route.query.id
    if (this.topPermTree.length > 0) {
      this.permTree = this.topPermTree
      this.permTree.forEach(item => {
        this.openKeys.push(item.id)
      });
    } else {
      this.getTopMenu()

    }
  },
  methods: {
    menuClick(record) {
      console.log(record, 'record')

      this.$router.push({ path: record.url, query: { id: record.id } });

    },
    getTopMenu() {
      qryModulePermByRoleId({
        module: 'TOP',
        roleId: storage.session.get('role')
      }).then(res => {
        if (res.code == 0) {
          const permTree = list2MenuTree(res.data, 'permId', 'pPermId', 'permName')
          this.permTree = permTree
          this.openKeys = []
          this.permTree.forEach(item => {
            this.openKeys.push(item.id)
          });
        }
      })
    },
    handleClick(e) {
      console.log('click', e);
    },
    titleClick(e) {
      console.log('titleClick', e);
    },

  },
  watch: {

  }
}
</script>

<style lang="scss" scoped>
.breadcrumbs {
  color: #7f7f7f;
  margin-top: 10px;
  margin-bottom: 10px;
}

.myDisplayWrap {
  height: 100%;
}

.myDisplayContent {
  height: calc(100% - 80px);
}

.myDisplayLeft {
  width: 256px;
  background-color: #fff;
  height: 100%;
  border-right: 1px solid rgb(232, 232, 232);
}
</style>
